Angular Material একটি শক্তিশালী UI কম্পোনেন্ট লাইব্রেরি যা আপনাকে আধুনিক, রেসপন্সিভ এবং অ্যাক্সেসযোগ্য ওয়েব অ্যাপ্লিকেশন তৈরি করতে সহায়তা করে। Angular Material এর কম্পোনেন্টগুলি যেমন টেবিল, ফর্ম, ডায়ালগ, বাটন, টেবিল, স্লাইডার, পপ-আপ এবং আরও অনেক ফিচার সরবরাহ করে, যা আপনাকে একটি সম্পূর্ণ ওয়েব অ্যাপ্লিকেশন দ্রুত এবং সহজে তৈরি করতে সক্ষম করে।

এখানে, আমরা Angular Material ব্যবহার করে একটি পূর্ণাঙ্গ অ্যাপ তৈরি করার প্রক্রিয়া দেখবো, যা একটি সাধারণ টাস্ক ম্যানেজমেন্ট অ্যাপ হবে।

১. Angular অ্যাপ তৈরি করা

প্রথমে, Angular CLI ব্যবহার করে একটি নতুন অ্যাপ তৈরি করুন:

ng new task-manager-app
cd task-manager-app

এখানে, আমরা একটি task-manager-app নামক অ্যাপ তৈরি করছি।

২. Angular Material ইন্সটল করা

Angular Material লাইব্রেরি ইন্সটল করতে নিম্নলিখিত কমান্ডটি রান করুন:

ng add @angular/material

এটি আপনাকে বিভিন্ন থিম নির্বাচন করতে বলবে এবং প্রয়োজনীয় ডিপেনডেন্সি ইন্সটল করবে। আপনি এখানে Indigo/Pink থিম এবং BrowserAnimationsModule নির্বাচন করতে পারেন।

৩. প্রয়োজনীয় মডিউলগুলো ইমপোর্ট করা

MatButtonModule, MatCardModule, MatInputModule, MatDialogModule, MatTableModule ইত্যাদি ইমপোর্ট করতে হবে যাতে বিভিন্ন UI কম্পোনেন্ট ব্যবহার করা যায়।

app.module.ts ফাইলে নিম্নলিখিত মডিউলগুলি ইমপোর্ট করুন:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { MatButtonModule } from '@angular/material/button';
import { MatCardModule } from '@angular/material/card';
import { MatInputModule } from '@angular/material/input';
import { MatDialogModule } from '@angular/material/dialog';
import { MatTableModule } from '@angular/material/table';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatButtonModule,
    MatCardModule,
    MatInputModule,
    MatDialogModule,
    MatTableModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

এখানে আমরা বিভিন্ন Angular Material কম্পোনেন্টের মডিউল ইমপোর্ট করেছি, যাতে আমরা তাদের ব্যবহার করতে পারি।

৪. অ্যাপের UI ডিজাইন করা

এখন AppComponent এ আমাদের টাস্ক ম্যানেজমেন্ট অ্যাপের UI ডিজাইন করবো।

app.component.html:

<div class="task-container">
  <mat-card>
    <mat-card-header>
      <mat-card-title>Task Manager</mat-card-title>
    </mat-card-header>
    <mat-card-content>
      <mat-form-field>
        <input matInput placeholder="Add a new task" [(ngModel)]="task">
      </mat-form-field>
      <button mat-raised-button color="primary" (click)="addTask()">Add Task</button>
    </mat-card-content>
  </mat-card>

  <mat-card>
    <mat-card-content>
      <mat-table [dataSource]="tasks">
        <ng-container matColumnDef="task">
          <th mat-header-cell *matHeaderCellDef> Task </th>
          <td mat-cell *matCellDef="let task">{{task}}</td>
        </ng-container>

        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
      </mat-table>
    </mat-card-content>
  </mat-card>
</div>

এখানে:

• MatCard: একটি কার্ড কম্পোনেন্ট যা অ্যাপের কন্টেন্ট ধারন করে।
• MatFormField: ইনপুট ফিল্ড যা টাস্ক অ্যাড করার জন্য ব্যবহৃত হবে।
• MatTable: টাস্কগুলো দেখানোর জন্য একটি টেবিল কম্পোনেন্ট।

৫. টাইপস্ক্রিপ্ট লজিক

এখন আমাদের অ্যাপের কার্যকারিতা যুক্ত করতে হবে। উদাহরণস্বরূপ, আমরা একটি টাস্ক যোগ করার জন্য একটি ফাংশন এবং টাস্ক তালিকা তৈরি করবো।

app.component.ts:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  task: string = '';
  tasks: string[] = [];
  displayedColumns: string[] = ['task'];

  addTask() {
    if (this.task) {
      this.tasks.push(this.task);
      this.task = '';
    }
  }
}

এখানে:

• task: নতুন টাস্ক যুক্ত করার জন্য একটি মডেল।
• tasks: টাস্কের তালিকা যেখানে সকল টাস্ক স্টোর করা হয়।
• addTask(): টাস্ক যোগ করার ফাংশন, যা ইনপুট থেকে টাস্ক নেয় এবং তাকে তালিকায় যোগ করে।

৬. স্টাইলিং (CSS)

এখন কিছু বেসিক স্টাইলিং যোগ করা যাক।

app.component.css:

.task-container {
  display: flex;
  flex-direction: column;
  margin: 20px;
  padding: 10px;
}

mat-card {
  margin-bottom: 20px;
}

mat-form-field {
  width: 100%;
}

button {
  margin-top: 10px;
}

এখানে, আমরা প্যাডিং, মার্জিন, ইনপুট ফিল্ডের আকার ইত্যাদি কাস্টমাইজ করেছি।

৭. ফলস্বরূপ অ্যাপ

এখন, আপনি একটি টাস্ক ম্যানেজমেন্ট অ্যাপ তৈরি করেছেন, যা Angular Material ব্যবহার করে নিম্নলিখিত কার্যকারিতা প্রদান করে:

1. একটি টাস্ক যোগ করার জন্য একটি ইনপুট ফিল্ড এবং বাটন।
2. MatTable কম্পোনেন্ট ব্যবহার করে টাস্ক তালিকা দেখানো।
3. Reactive এবং Declarative ফর্ম ব্যবহারের মাধ্যমে ডেটা বাইন্ডিং।

Angular Material ব্যবহার করে আপনি খুব সহজেই একটি পূর্ণাঙ্গ এবং সুন্দর UI ডিজাইন করতে পারেন, যা আধুনিক, রেসপন্সিভ এবং ব্যবহারকারী-বান্ধব হয়। Angular Material এর কম্পোনেন্ট যেমন MatCard, MatButton, MatInput, MatTable আপনাকে দ্রুত এবং কার্যকরী অ্যাপ্লিকেশন তৈরি করতে সহায়তা করে। আজকের উদাহরণে, আমরা টাস্ক ম্যানেজমেন্ট অ্যাপ তৈরি করেছি, যা একটি সাধারণ উদাহরণ হিসেবে কাজ করবে যে কিভাবে Angular Material ব্যবহার করে একটি ফাংশনাল অ্যাপ্লিকেশন তৈরি করা যায়।

Angular Material একটি শক্তিশালী এবং প্রভাবশালী UI কম্পোনেন্ট লাইব্রেরি, যা ব্যবহার করে আপনি রেসপন্সিভ এবং আধুনিক ড্যাশবোর্ড তৈরি করতে পারেন। রেসপন্সিভ ড্যাশবোর্ড তৈরি করার জন্য Angular Material এর বিভিন্ন উপাদান যেমন Sidenav, Grid List, Card, Toolbar, Table, এবং Icon ব্যবহার করা যেতে পারে।

এখানে আমরা দেখবো কিভাবে Angular Material ব্যবহার করে একটি রেসপন্সিভ ড্যাশবোর্ড তৈরি করা যায়, যা বিভিন্ন স্ক্রীন সাইজে ভালভাবে প্রদর্শিত হবে।

১. প্রয়োজনীয় মডিউল ইমপোর্ট করা

প্রথমে, Angular Material এর প্রয়োজনীয় মডিউলগুলো ইমপোর্ট করতে হবে। যেমন MatSidenavModule, MatGridListModule, MatCardModule, MatToolbarModule, MatIconModule, এবং MatButtonModule।

মডিউল ইমপোর্ট:

import { MatSidenavModule } from '@angular/material/sidenav';
import { MatGridListModule } from '@angular/material/grid-list';
import { MatCardModule } from '@angular/material/card';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatIconModule } from '@angular/material/icon';
import { MatButtonModule } from '@angular/material/button';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  imports: [
    MatSidenavModule,
    MatGridListModule,
    MatCardModule,
    MatToolbarModule,
    MatIconModule,
    MatButtonModule,
    BrowserAnimationsModule
  ]
})
export class AppModule {}

২. HTML টেমপ্লেট (ড্যাশবোর্ডের কাঠামো)

এখন, একটি রেসপন্সিভ ড্যাশবোর্ডের কাঠামো তৈরি করতে Sidenav, Grid List, Card ইত্যাদি উপাদান ব্যবহার করা হবে।

HTML কোড:

<mat-toolbar color="primary">
  <span>Responsive Dashboard</span>
</mat-toolbar>

<mat-sidenav-container class="example-container">
  <mat-sidenav #sidenav mode="side" opened="true">
    <mat-nav-list>
      <mat-list-item>
        <mat-icon>home</mat-icon> Home
      </mat-list-item>
      <mat-list-item>
        <mat-icon>account_circle</mat-icon> Profile
      </mat-list-item>
      <mat-list-item>
        <mat-icon>settings</mat-icon> Settings
      </mat-list-item>
    </mat-nav-list>
  </mat-sidenav>

  <mat-sidenav-content>
    <div class="content">
      <mat-grid-list cols="3" rowHeight="200px">
        <mat-grid-tile *ngFor="let card of cards">
          <mat-card>
            <mat-card-header>
              <mat-card-title>{{ card.title }}</mat-card-title>
            </mat-card-header>
            <mat-card-content>
              <p>{{ card.content }}</p>
            </mat-card-content>
          </mat-card>
        </mat-grid-tile>
      </mat-grid-list>
    </div>
  </mat-sidenav-content>
</mat-sidenav-container>

এখানে:

• mat-toolbar: ড্যাশবোর্ডের হেডার তৈরি করতে ব্যবহৃত।
• mat-sidenav: এটি সাইডবার (Sidenav) তৈরি করে, যেখানে নেভিগেশন লিঙ্কগুলো থাকে।
• mat-nav-list: এটি একটি লিস্ট তৈরি করে, যা সাইডবারে ব্যবহারকারীর জন্য নেভিগেশন লিঙ্কস বা মেনু আইটেমস প্রর্দশিত করবে।
• mat-grid-list: এটি একটি গ্রিড তৈরি করে, যা ড্যাশবোর্ডে বিভিন্ন উপাদান বা কার্ড (card) প্রদর্শন করবে।
• mat-card: এটি ড্যাশবোর্ডের বিভিন্ন সেকশনে ডেটা প্রদর্শনের জন্য ব্যবহৃত হবে।

৩. স্টাইলিং (CSS)

আমরা চাইলে CSS ব্যবহার করে ড্যাশবোর্ডটিকে আরও সুন্দর এবং রেসপন্সিভ করতে পারি।

CSS (styles.css):

.example-container {
  height: 100%;
}

mat-sidenav {
  width: 250px;
}

.content {
  margin: 20px;
}

mat-grid-list {
  margin-top: 20px;
}

@media (max-width: 600px) {
  mat-sidenav {
    width: 100%;
  }

  mat-grid-list {
    grid-template-columns: 1fr;
  }
}

এখানে:

• mat-sidenav: সাইডবারের আকার এবং স্থিতি কাস্টমাইজ করা হয়েছে।
• @media query: রেসপন্সিভ ডিজাইন তৈরির জন্য, ছোট স্ক্রীন সাইজে সাইডবার এবং গ্রিডের কন্টেন্ট পরিবর্তন করা হয়েছে।

৪. ডেটা এবং টাইপস্ক্রিপ্ট

এখন, টেমপ্লেটের জন্য ডেটা এবং অন্যান্য কনফিগারেশন টাইপস্ক্রিপ্টে সেট করতে হবে। এখানে, একটি কাস্টম কার্ড ডেটা তৈরি করা হয়েছে।

TypeScript (app.component.ts):

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  cards = [
    { title: 'Card 1', content: 'Content for Card 1' },
    { title: 'Card 2', content: 'Content for Card 2' },
    { title: 'Card 3', content: 'Content for Card 3' }
  ];
}

এখানে:

• cards অ্যারে ড্যাশবোর্ডে প্রদর্শিত হবে যেখানে প্রত্যেকটি আইটেম একটি mat-card তৈরি করবে।

৫. রেসপন্সিভ নেভিগেশন এবং সাইডবার

Sidenav এর জন্য রেসপন্সিভ নেভিগেশন কনফিগার করার জন্য আপনি একটি টগল বাটন যোগ করতে পারেন, যা মোবাইল বা ছোট স্ক্রীনে সাইডবারকে খুলতে বা বন্ধ করতে সাহায্য করবে।

HTML কোড (সাইডবার টগল):

<mat-toolbar color="primary">
  <button mat-icon-button (click)="sidenav.toggle()">
    <mat-icon>menu</mat-icon>
  </button>
  <span>Responsive Dashboard</span>
</mat-toolbar>

এখানে, (click)="sidenav.toggle()" ব্যবহার করে আপনি সাইডবারকে টগল করতে পারবেন।

এখন পর্যন্ত আমরা Angular Material ব্যবহার করে একটি রেসপন্সিভ ড্যাশবোর্ড তৈরি করেছি যা সাইডবার, কার্ড, এবং গ্রিড লিস্ট সহ বিভিন্ন উপাদান ব্যবহার করে তৈরি হয়েছে। mat-sidenav, mat-toolbar, mat-grid-list, এবং mat-card এর মাধ্যমে আপনি একটি আধুনিক, সুন্দর এবং রেসপন্সিভ ড্যাশবোর্ড তৈরি করতে পারেন। CSS Media Queries ব্যবহার করে ছোট স্ক্রীন বা মোবাইল ডিভাইসে কনটেন্টের ডিজাইনকে রেসপন্সিভ করা হয়েছে।

Angular Material এবং Angular Forms এর মধ্যে ইন্টিগ্রেশন ব্যবহার করে আপনি খুবই ইন্টারঅ্যাকটিভ এবং ইউজার-বান্ধব ফর্ম তৈরি করতে পারেন। Angular Forms (Reactive Forms এবং Template-driven Forms) এবং Angular Material (MatInput, MatSelect, MatCheckbox, MatRadio, MatDatepicker) কম্পোনেন্ট ব্যবহার করে ফর্মগুলোর সাথে ইন্টারঅ্যাকশন, ভ্যালিডেশন এবং সাবমিশন ইত্যাদি আরও কার্যকরী এবং সহজ করা যায়।

এছাড়া, Angular Services এর সাথে ইন্টিগ্রেশন ব্যবহার করে আপনি ডেটা এক্সেস, API কল এবং ডেটা সঞ্চয় করার কার্যক্রমও সহজে সম্পাদন করতে পারেন। চলুন দেখি Angular Forms এবং Services এর সাথে Material Components এর ইন্টিগ্রেশন কিভাবে কাজ করে।

১. প্রাথমিক প্রস্তুতি

প্রথমে, আপনার app.module.ts ফাইলে প্রয়োজনীয় Angular Material এবং FormsModule ইমপোর্ট করতে হবে:

মডিউল ইমপোর্ট করা

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { MatInputModule } from '@angular/material/input';
import { MatButtonModule } from '@angular/material/button';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatSelectModule } from '@angular/material/select';
import { ReactiveFormsModule, FormsModule } from '@angular/forms';

@NgModule({
  imports: [
    BrowserModule,
    MatInputModule,
    MatButtonModule,
    MatFormFieldModule,
    MatSelectModule,
    ReactiveFormsModule,
    FormsModule
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}

২. Angular Reactive Forms এর সাথে Angular Material ইনপুট কম্পোনেন্ট

এখন, আমরা একটি Reactive Form তৈরি করব যেখানে MatInput কম্পোনেন্ট ব্যবহার করব। এই উদাহরণে আমরা ব্যবহারকারীর নাম এবং ইমেইল ইনপুট নেবো।

HTML টেমপ্লেট:

<form [formGroup]="userForm" (ngSubmit)="onSubmit()">
  <mat-form-field appearance="fill">
    <mat-label>Username</mat-label>
    <input matInput formControlName="username" required>
  </mat-form-field>

  <mat-form-field appearance="fill">
    <mat-label>Email</mat-label>
    <input matInput formControlName="email" required>
  </mat-form-field>

  <button mat-raised-button color="primary" type="submit" [disabled]="userForm.invalid">Submit</button>
</form>

টাইপস্ক্রিপ্ট কোড:

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  userForm: FormGroup;

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.userForm = this.fb.group({
      username: ['', Validators.required],
      email: ['', [Validators.required, Validators.email]]
    });
  }

  onSubmit() {
    console.log(this.userForm.value);
  }
}

এখানে:

• ReactiveFormsModule ব্যবহার করা হয়েছে যা FormGroup এবং FormControl এর মাধ্যমে ফর্ম কন্ট্রোল এবং ভ্যালিডেশন ম্যানেজ করে।
• MatInput কম্পোনেন্ট ব্যবহার করে ফর্মের ইনপুট ফিল্ড তৈরি করা হয়েছে।
• Validators.required এবং Validators.email দিয়ে ইনপুট ভ্যালিডেশন করা হয়েছে।

৩. Angular Services এর সাথে Angular Material ইন্টিগ্রেশন

Angular Services ব্যবহার করে আপনি ফর্ম ডেটা একটি API এ পাঠাতে পারেন অথবা স্থানীয়ভাবে ডেটা সংরক্ষণ করতে পারেন। এখানে, আমরা HttpClientModule ব্যবহার করে ফর্ম সাবমিটের সময় ডেটা একটি সার্ভিসে পাঠাবো।

১. সার্ভিস তৈরি করা

প্রথমে একটি সার্ভিস তৈরি করুন যেটি API কল বা ডেটা ম্যানেজমেন্ট করবে।

ng generate service user

এখন user.service.ts ফাইলে একটি API কল যোগ করুন:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class UserService {

  private apiUrl = 'https://jsonplaceholder.typicode.com/users';  // উদাহরণ API

  constructor(private http: HttpClient) { }

  saveUser(userData: any): Observable<any> {
    return this.http.post(this.apiUrl, userData);
  }
}

২. ফর্ম সাবমিট করার সময় সার্ভিসে ডেটা পাঠানো

এখন, onSubmit() ফাংশনে ফর্ম ডেটা UserService এ পাঠাতে হবে:

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { UserService } from './user.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  userForm: FormGroup;

  constructor(private fb: FormBuilder, private userService: UserService) {}

  ngOnInit() {
    this.userForm = this.fb.group({
      username: ['', Validators.required],
      email: ['', [Validators.required, Validators.email]]
    });
  }

  onSubmit() {
    if (this.userForm.valid) {
      this.userService.saveUser(this.userForm.value).subscribe(response => {
        console.log('User saved successfully:', response);
      });
    }
  }
}

এখানে:

• UserService এর saveUser() মেথডটি HttpClient ব্যবহার করে API এ POST রিকোয়েস্ট পাঠাচ্ছে।
• ফর্মটি সাবমিট হলে ডেটা সার্ভিসে পাঠানো হবে।

৩. HttpClientModule ইমপোর্ট করা

HttpClientModule ইমপোর্ট করতে হবে যাতে আপনি HTTP রিকোয়েস্ট করতে পারেন।

import { HttpClientModule } from '@angular/common/http';

@NgModule({
  imports: [
    HttpClientModule
  ]
})
export class AppModule {}

৪. ফর্মের ভ্যালিডেশন এবং সার্ভিস থেকে রেসপন্স

Material Snackbar ব্যবহার করে আপনি সফল সাবমিশন বা ত্রুটি বার্তা প্রদর্শন করতে পারেন।

HTML টেমপ্লেট:

<mat-snack-bar></mat-snack-bar>

টাইপস্ক্রিপ্ট কোড:

import { MatSnackBar } from '@angular/material/snack-bar';

constructor(private fb: FormBuilder, private userService: UserService, private snackBar: MatSnackBar) {}

onSubmit() {
  if (this.userForm.valid) {
    this.userService.saveUser(this.userForm.value).subscribe(response => {
      this.snackBar.open('User saved successfully!', 'Close', { duration: 2000 });
    }, error => {
      this.snackBar.open('Error saving user', 'Close', { duration: 2000 });
    });
  }
}

এখানে MatSnackBar ব্যবহার করে সাবমিশন সফল বা ব্যর্থ হলে ব্যবহারকারীর জন্য একটি স্ন্যাকবার (স্মল নোটিফিকেশন) প্রদর্শন করা হয়।

Angular Material এর ফর্ম কম্পোনেন্টের সাথে Reactive Forms এবং Angular Services এর ইন্টিগ্রেশন আপনার অ্যাপ্লিকেশনকে আরও ইন্টারঅ্যাকটিভ এবং কার্যকরী করে তোলে। MatInput, MatSelect, এবং MatButton এর মতো Material কম্পোনেন্ট ব্যবহার করে আপনি ফর্ম তৈরি করতে পারেন, এবং UserService এর মাধ্যমে API বা সার্ভিসে ডেটা পাঠাতে পারেন। Angular Material এবং Angular Services এর এই শক্তিশালী ইন্টিগ্রেশন ডেভেলপারদের আরও উন্নত এবং প্রোডাকটিভ ফর্ম অ্যাপ্লিকেশন তৈরি করতে সহায়তা করে।